<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				padding: 0px;
				margin: 0px;
				font-size: 14px;
			}
			
			a {
				text-decoration: none;
			}
			
			#head {
				height: 100px;
				line-height: 100px;
				text-align: center;
				width: 100%;
				border-bottom: 1px solid#FF6700;
			}
			
			#head1 {
				height: 100px;
				line-height: 100px;
				width: 1226px;
				margin: 0px auto;
			}
			
			.head-img {
				float: left;
				margin-top: 20px;
			}
			
			.car {
				font-size: 30px;
				float: left;
				margin-left: 40px;
			}
			
			.head-text {
				float: left;
				color: #757575;
				margin-top: 7px;
				margin-left: 15px;
			}
			
			#midlle {
				width: 100%;
				background-color: #F5F5F5;
				position: relative;
				top: 0px;
				left: 0px;
			}
			
			.goods {
				width: 1226px;
				margin: 0px auto;
				background-color: white;
				position: relative;
				top: 50px;
			}
			
			.goods-caozuo {
				width: 1226px;
				height: 70px;
				border-bottom: 1px solid#E0E0E0;
				margin: 0px auto;
				position: relative;
			}
			
			.goods-caozuo ul {
				float: left;
				margin-left: -630px;
			}
			
			.goods-caozuo li {
				list-style-type: none;
				float: left;
				line-height: 70px;
				margin: 0px 10px;
			}
			
			i {
				width: 21px;
				height: 21px;
				border: 1px solid#DCDCDC;
				display: block;
			}
			
			i:hover {
				border: 0px;
				background: url(img/hover.png);
			}
			
			i.active {
				border: 0px;
				background: url(img/active.png);
			}
			
			.goods-1 {
				width: 1226px;
				height: 115px;
				border-bottom: 1px solid#E0E0E0;
				margin: 0px auto;
			}
			
			.goods-1 li {
				list-style-type: none;
				float: left;
				line-height: 115px;
			}
			
			.shuliang {
				width: 147px;
				height: 37px;
				line-height: 37px;
				border: 1px solid#E0E0E0;
				margin-top: 40px;
			}
			
			#jianshao {
				border: none;
				width: 49px;
				line-height: 37px;
				text-align: center;
				cursor: pointer;
				outline: none;
			}
			
			#jianshao:hover {
				background-color: #E0E0E0;
			}
			
			#number {
				border: none;
				width: 49px;
				line-height: 37px;
				text-align: center;
				outline: none;
			}
			
			#zengjia {
				border: none;
				width: 49px;
				line-height: 37px;
				text-align: center;
				cursor: pointer;
				outline: none;
			}
			
			#zengjia:hover {
				background-color: #E0E0E0;
			}
			
			#shanchu {
				width: 30px;
				height: 30px;
				border: none;
				cursor: pointer;
				text-align: center;
				outline: none;
			}
			
			#shanchu:hover {
				border-radius: 50%;
				background-color: red;
				color: white;
			}
			
			.xuanze {
				width: 110px;
				height: 85px;
			}
			
			.zhaopian {
				width: 80px;
				height: 85px;
				padding-right: 40px;
			}
			
			.jieshao {
				width: 415px;
				height: 85px;
			}
			
			.danjia {
				width: 75px;
				padding-right: 65px;
				height: 85px;
				text-align: right;
			}
			
			.bianhua {
				width: 150px;
				height: 85px;
			}
			
			.xiaoji {
				width: 85px;
				padding-right: 115px;
				text-align: right;
				height: 85px;
			}
			
			.zuihou {
				width: 80px;
				height: 85px;
			}
			
			#no2 {
				margin-left: 30px;
				position: relative;
				top: 45px;
			}
			
			.jieSuan {
				width: 1226px;
				height: 50px;
				background-color: #FAFAFA;
				margin: 0px auto;
				margin-top: 80px;
			}
			
			.shopping {
				float: left;
				color: #757575;
			}
			
			.shopping-1 {
				line-height: 50px;
				margin-left: 24px;
				margin-right: 50px;
				color: #757575;
			}
			
			.jianshu1 {
				color: #FF6734;
			}
			
			.jianshu2 {
				color: #FF6734;
			}
			
			.feiyong {
				float: right;
			}
			
			#yunfei {
				font-style: normal;
				font-size: 30px;
			}
			
			.foot-head {
				width: 1226px;
				border-bottom: 2px solid#E0E0E0;
				margin: 0px auto;
				margin-top: 30px;
				text-align: center;
			}
			
			.foot-head h1 {
				font-size: 30px;
				position: relative;
				top: 15px;
				left: 50%;
				width: 500px;
				background-color: #F5F5F5;
				margin-left: -250px;
			}
			
			.foot-midlle {
				width: 1226px;
				height: 765px;
				margin: 0px auto;
				margin-top: 30px;
			}
			
			.foot-midlle a {
				color: black;
			}
			
			.foot-midlle-good1 {
				float: left;
				height: 300px;
				width: 235px;
				background-color: white;
				text-align: center;
				position: relative;
				left: 0px;
				top: 0px;
				margin-right: 13px;
				margin-top: 15px;
			}
			
			.foot-midlle-good2 {
				float: left;
				height: 300px;
				width: 235px;
				background-color: white;
				text-align: center;
				position: relative;
				left: 0px;
				top: 0px;
				margin-right: 13px;
				margin-top: 15px;
			}
			
			.foot-midlle-good3 {
				float: left;
				height: 300px;
				width: 235px;
				background-color: white;
				text-align: center;
				position: relative;
				left: 0px;
				top: 0px;
				margin-right: 13px;
				margin-top: 15px;
			}
			
			.foot-midlle-good4 {
				float: left;
				height: 300px;
				width: 235px;
				background-color: white;
				text-align: center;
				position: relative;
				left: 0px;
				top: 0px;
				margin-right: 12px;
				margin-top: 15px;
			}
			
			.foot-midlle-good5 {
				float: left;
				height: 300px;
				width: 235px;
				background-color: white;
				text-align: center;
				position: relative;
				left: 0px;
				top: 0px;
				margin-top: 15px;
			}
			
			.shop-car {
				width: 118px;
				height: 28px;
				line-height: 28px;
				text-align: center;
				border: 1px solid#FF6700;
				position: relative;
				top: -23px;
				left: 60px;
				color: #FF6700;
				display: none;
				background-color: white;
			}
			
			.shop-car:hover {
				background-color: #FF6700;
				color: white;
			}
			
			#last {
				width: 100%;
			}
			
			.last-head {
				width: 1226px;
				margin: 0px auto;
				height: 80px;
				line-height: 80px;
				border-bottom: 1px solid#E0E0E0;
			}
			
			.weixiu {
				float: left;
				width: 244px;
				height: 25px;
				line-height: 25px;
				text-align: center;
				border-right: 1px solid#E0E0E0;
				position: relative;
				left: 0px;
				top: 50%;
				margin-top: -12.5px;
			}
			
			.weixiu a {
				color: #616161;
				font-size: 16px;
			}
			
			.weixiu a:hover {
				color: #FF6700;
			}
			
			.last-middle {
				width: 1226px;
				margin: 0px auto;
				height: 200px;
			}
			
			.last-middle-left {
				width: 978px;
				border-right: 1px solid#E0E0E0;
				height: 124px;
				float: left;
				margin-top: 40px;
			}
			
			.last-middle-right {
				float: right;
				width: 246px;
				height: 124px;
				margin-top: 40px;
				text-align: center;
			}
			
			#rexian {
				width: 123px;
				height: 28px;
				line-height: 28px;
				border: 1px solid#FF6700;
				font-size: 12px;
				margin-left: 60px;
				margin-top: 20px;
				color: #FF6700;
			}
			
			#rexian:hover {
				background-color: #FF6700;
				color: white;
			}
			
			.last-middle-left-help {
				float: left;
				width: 162px;
				height: 124px;
				color: #424242;
			}
			
			.last-middle-left-help a {
				color: #757575;
				font-size: 12px;
			}
			
			.last-middle-left-help a:hover {
				color: #FF6700;
			}
			
			#mi {
				width: 100%;
				background-color: #FAFAFA;
				height: 200px;
			}
			
			.mi-1 {
				width: 1226px;
				margin: 0px auto;
			}
			
			.logo {
				float: left;
				margin-top: 40px;
			}
			
			.mi-1-1 a {
				font-size: 12px;
				color: #757575;
			}
			
			.mi-1-1 span {
				font-size: 12px;
				color: #757575;
			}
			
			.mi-1-1 a:hover {
				color: #FF6700;
			}
			
			.zuihou2 {
				width: 1226px;
				margin: 0px auto;
				text-align: center;
				clear: both;
			}
			
			.zuihou2 h2 {
				font-size: 20px;
				color: #C2C2C2;
			}
			
			#main {
				width: 100%;
				height: 100%;
				position: relative;
			}
			
			#beijing {
				width: 100%;
				height: 2224px;
				background-color: #808080;
				z-index: 10px;
				position: absolute;
				left: 0px;
				top: 0px;
				background-color: rgba(0, 0, 0, 0.6);
				display: none;
				overflow: hidden;
			}
			
			#tishi {
				width: 500px;
				height: 270px;
				position: relative;
				background-color: white;
				top: -270px;
				left: 50%;
				margin-left: -250px;
				z-index: 30px;
			}
			
			@keyframes xiaoshi {
				from {
					top: 100px;
				}
				to {
					top: -270px;
				}
			}
			
			@keyframes xiaoshi2 {
				from {
					top: -270px;
				}
				to {
					top: 100px;
				}
			}
			
			@keyframes xs3 {
				from {
					display: "block";
				}
				to {
					display: "none";
				}
			}
			
			#queding {
				float: right;
				width: 30px;
				height: 30px;
				font-size: 20px;
				color: #747474;
				cursor: pointer;
				margin-right: 10px;
				margin-top: 10px;
				font-weight: bold;
				line-height: 30px;
				text-align: center;
			}
			
			#queding:hover {
				border-radius: 50%;
				background-color: #E53935;
				color: white;
			}
			
			.queding2 {
				float: left;
				font-size: 30px;
				margin-left: 34%;
				margin-top: 80px;
				font-size: #424242;
			}
			
			#quxiao {
				float: left;
				width: 160px;
				height: 40px;
				background-color: #B0B0B0;
				line-height: 40px;
				text-align: center;
				color: white;
				float: left;
				margin-left: -260px;
				margin-top: 190px;
				cursor: pointer;
			}
			
			#quxiao:hover {
				background-color: #868686;
			}
			
			#queding3 {
				width: 160px;
				height: 40px;
				background-color: #ff6700;
				line-height: 40px;
				text-align: center;
				color: white;
				float: left;
				margin-left: -80px;
				margin-top: 190px;
				cursor: pointer;
			}
			
			#queding3:hover {
				background-color: #F55B06;
			}
		</style>
	</head>

	<body>
		<div id="main">
			<div id="head">
				<div id="head1">
					<div style="float: left;">
						<div class="head-img">
							<img src="img/milogo.png" />
						</div>
						<h2 class="car">我的购物车</h2>
						<div class="head-text">
							温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算
						</div>
					</div>
					<div style="float: right;color:#757575 ;">
						<span>814208189 |我的订单</span>
					</div>
				</div>
			</div>
			<div id="midlle">
				<div class="goods">
					<div class="goods-caozuo">
						<ul>
							<li style="margin-top: 25px;"><i id="mian"></i></li>
							<li style="margin-right: 130px;">全选</li>
							<li style="margin-right: 390px;">商品名称</li>
							<li style="margin-right: 110px;">单价</li>
							<li style="margin-right: 110px;">数量</li>
							<li style="margin-right: 110px;">小计</li>
							<li>操作</li>
						</ul>
					</div>
					<div class="goods-1">
						<ul>
							<li class="xuanze"><i id="no2"></i></li>
							<li class="zhaopian">
								<img src="img/pms_1482321199.12589253!80x80.jpg" style="position: relative;top: 20px;" />
							</li>
							<li class="jieshao">
								<p>
									<a href="#" style="color: black;font-size: 20px;">
										小米活塞耳机 清新版 黑色 </a>
								</p>

							</li>
							<li class="danjia">29元</li>
							<li class="bianhua">
								<div class="shuliang">
									<input type="text" name="jianshao" id="jianshao" value="--" onclick="jianShao(this)" /><input type="text" name="number" id="number" value="1" /><input onclick="zengJia(this)" type="text" name="zengjia" id="zengjia" value="+" />
								</div>
							</li>
							<li class="xiaoji">29元</li>
							<li class="zuihou">
								<input type="text" name="shanchu" id="shanchu" value="X" onclick="shanChu(this,'beijing')" />
							</li>
						</ul>
					</div>
					<div class="goods-1">
						<ul>
							<li class="xuanze"><i id="no2"></i></li>
							<li class="zhaopian">
								<img src="img/pms_1482221011.26064844!80x80.jpg" style="position: relative;top: 20px;" />
							</li>
							<li class="jieshao">
								<p>
									<a href="#" style="color: black;font-size: 20px;">
										小米指环支架 金色 </a>
								</p>

							</li>
							<li class="danjia">19元</li>
							<li class="bianhua">
								<div class="shuliang">
									<input type="text" name="jianshao" id="jianshao" value="--" onclick="jianShao(this)" /><input type="text" name="number" id="number" value="1" /><input onclick="zengJia(this)" type="text" name="zengjia" id="zengjia" value="+" />
								</div>
							</li>
							<li class="xiaoji">19元</li>
							<li class="zuihou">
								<input type="text" name="shanchu" id="shanchu" value="X" onclick="shanChu(this,'beijing')" />
							</li>
						</ul>
					</div>
					<div class="goods-1">
						<ul>
							<li class="xuanze"><i id="no2"></i></li>
							<li class="zhaopian">
								<img src="img/T1ycK_BjYv1RXrhCrK!80x80.jpg" style="position: relative;top: 20px;" />
							</li>
							<li class="jieshao">
								<p>
									<a href="#" style="color: black;font-size: 20px;">
										小米圈铁耳机 金色</a>
								</p>

							</li>
							<li class="danjia">99元</li>
							<li class="bianhua">
								<div class="shuliang">
									<input type="text" name="jianshao" id="jianshao" value="--" onclick="jianShao(this)" /><input type="text" name="number" id="number" value="1" /><input onclick="zengJia(this)" type="text" name="zengjia" id="zengjia" value="+" />
								</div>
							</li>
							<li class="xiaoji">99元</li>
							<li class="zuihou">
								<input type="text" name="shanchu" id="shanchu" value="X" onclick="shanChu(this,'beijing')" />
							</li>
						</ul>
					</div>
					<div class="goods-1">
						<ul>
							<li class="xuanze"><i id="no2"></i></li>
							<li class="zhaopian">
								<img src="img/pms_1476688193.46995320!80x80.jpg" style="position: relative;top: 20px;" />
							</li>
							<li class="jieshao">
								<p>
									<a href="#" style="color: black;font-size: 20px;">
										10000mAh小米移动电源2 银色 </a>
								</p>

							</li>
							<li class="danjia">79元</li>
							<li class="bianhua">
								<div class="shuliang">
									<input type="text" name="jianshao" id="jianshao" value="--" onclick="jianShao(this)" /><input type="text" name="number" id="number" value="1" /><input onclick="zengJia(this)" type="text" name="zengjia" id="zengjia" value="+" />
								</div>
							</li>
							<li class="xiaoji">79元</li>
							<li class="zuihou">
								<input type="text" name="shanchu" id="shanchu" value="X" onclick="shanChu(this,'beijing')" />
							</li>
						</ul>
					</div>
					<div class="goods-1">
						<ul>
							<li class="xuanze"><i id="no2"></i></li>
							<li class="zhaopian">
								<img src="img/pms_1476688193.46995320!80x80.jpg" style="position: relative;top: 20px;" />
							</li>
							<li class="jieshao">
								<p>
									<a href="#" style="color: black;font-size: 20px;">
										10000mAh小米移动电源2 银色 </a>
								</p>

							</li>
							<li class="danjia">29元</li>
							<li class="bianhua">
								<div class="shuliang">
									<input type="text" name="jianshao" id="jianshao" value="--" onclick="jianShao(this)" /><input type="text" name="number" id="number" value="1" /><input onclick="zengJia(this)" type="text" name="zengjia" id="zengjia" value="+" />
								</div>
							</li>
							<li class="xiaoji">29元</li>
							<li class="zuihou">
								<input type="text" name="shanchu" id="shanchu" value="X" onclick="shanChu(this,'beijing')" />
							</li>
						</ul>
					</div>
				</div>
				<div class="jieSuan">
					<div class="shopping">
						<a href="#" class="shopping-1">继续购物</a>
						共 <span class="jianshu1">5</span> 件商品，已选择 <span class="jianshu2">0</span> 件
					</div>
					<div class="feiyong">
						<span style="color: #FF6734;">合计（不含运费）：<em id="yunfei">0.00元</em></span>
					</div>
				</div>
				<div class="foot">
					<div class="foot-head">
						<h1>买购物车中商品的人还买了</h1>
					</div>
					<div class="foot-midlle">
						<div class="foot-midlle-good1" onmouseover="show(this)" onmouseout="yincang(this)">
							<div style="margin-top: 40px;">
								<a href="#"><img src="img/pms_1468287589.40786199!220x220.jpg" style="width: 60%;" /></a>
							</div>
							<div style="margin-top: 20px;">
								<a href="#">米家随身风扇 </a>
							</div>
							<div style="color: #FF6700;margin-top: 12px;">19.9元</div>
							<div style="color: #757575;margin-top: 12px;">1.5万人好评</div>
							<div class="shop-car">
								加入购物车
							</div>
						</div>
						<div class="foot-midlle-good2" onmouseover="show(this)" onmouseout="yincang(this)">
							<div style="margin-top: 40px;">
								<a href="#"><img src="img/5a28d943-ef5d-4920-a89a-7f1bce6c5b35.jpg" style="width: 60%;" /></a>
							</div>
							<div style="margin-top: 20px;">
								<a href="#">米家LED随身灯 增强版 </a>
							</div>
							<div style="color: #FF6700;margin-top: 12px;">19.9元</div>
							<div style="color: #757575;margin-top: 12px;">3.3万人好评</div>
							<div class="shop-car">
								加入购物车
							</div>
						</div>
						<div class="foot-midlle-good3" onmouseover="show(this)" onmouseout="yincang(this)">
							<div style="margin-top: 40px;">
								<a href="#"><img src="img/pms_1469410489.30412121.jpg" style="width: 60%;" /></a>
							</div>
							<div style="margin-top: 20px;">
								<a href="#">米家签字笔 </a>
							</div>
							<div style="color: #FF6700;margin-top: 12px;">12.9元</div>
							<div style="color: #757575;margin-top: 12px;">3.8万人好评</div>
							<div class="shop-car">
								加入购物车
							</div>
						</div>
						<div class="foot-midlle-good4" onmouseover="show(this)" onmouseout="yincang(this)">
							<div style="margin-top: 40px;">
								<a href="#"><img src="img/pms_1478070969.5786053.jpg" style="width: 60%;" /></a>
							</div>
							<div style="margin-top: 20px;">
								<a href="#">小米二合一数据线30cm </a>
							</div>
							<div style="color: #FF6700;margin-top: 12px;">19元</div>
							<div style="color: #757575;margin-top: 12px;">7166人好评</div>
							<div class="shop-car">
								加入购物车
							</div>
						</div>
						<div class="foot-midlle-good5" onmouseover="show(this)" onmouseout="yincang(this)">
							<div style="margin-top: 40px;">
								<a href="#"><img src="img/pms_1479972875.00224492.jpg" style="width: 60%;" /></a>
							</div>
							<div style="margin-top: 20px;">
								<a href="#">最生活毛巾·青春系列 </a>
							</div>
							<div style="color: #FF6700;margin-top: 12px;">19.9元</div>
							<div style="color: #757575;margin-top: 12px;">1.3万人好评</div>
							<div class="shop-car">
								加入购物车
							</div>
						</div>
						<div class="foot-midlle-good1" onmouseover="show(this)" onmouseout="yincang(this)">
							<div style="margin-top: 40px;">
								<a href="#"><img src="img/pms_1478070969.5786053.jpg" style="width: 60%;" /></a>
							</div>
							<div style="margin-top: 20px;">
								<a href="#">小米二合一数据线100cm </a>
							</div>
							<div style="color: #FF6700;margin-top: 12px;">24.9元</div>
							<div style="color: #757575;margin-top: 12px;">7345人好评</div>
							<div class="shop-car">
								加入购物车
							</div>
						</div>
						<div class="foot-midlle-good2" onmouseover="show(this)" onmouseout="yincang(this)">
							<div style="margin-top: 40px;">
								<a href="#"><img src="img/pms_1474430362.70018703.jpg" style="width: 60%;" /></a>
							</div>
							<div style="margin-top: 20px;">
								<a href="#">小米自拍杆（线控版） </a>
							</div>
							<div style="color: #FF6700;margin-top: 12px;">79元</div>
							<div style="color: #757575;margin-top: 12px;">1.1万人好评</div>
							<div class="shop-car">
								加入购物车
							</div>
						</div>
						<div class="foot-midlle-good3" onmouseover="show(this)" onmouseout="yincang(this)">
							<div style="margin-top: 40px;">
								<a href="#"><img src="img/T1xxVTBghv1RXrhCrK!220x220.jpg" style="width: 60%;" /></a>
							</div>
							<div style="margin-top: 20px;">
								<a href="#">彩虹5号电池（10粒装） </a>
							</div>
							<div style="color: #FF6700;margin-top: 12px;">9.9元</div>
							<div style="color: #757575;margin-top: 12px;">9.9万人好评</div>
							<div class="shop-car">
								加入购物车
							</div>
						</div>
						<div class="foot-midlle-good4" onmouseover="show(this)" onmouseout="yincang(this)">
							<div style="margin-top: 40px;">
								<a href="#"><img src="img/pms_1478248721.42297795.jpg" style="width: 60%;" /></a>
							</div>
							<div style="margin-top: 20px;">
								<a href="#">小米蓝牙耳机青春版 </a>
							</div>
							<div style="color: #FF6700;margin-top: 12px;">59元</div>
							<div style="color: #757575;margin-top: 12px;">2.3万人好评</div>
							<div class="shop-car">
								加入购物车
							</div>
						</div>
						<div class="foot-midlle-good5" onmouseover="show(this)" onmouseout="yincang(this)">
							<div style="margin-top: 40px;">
								<a href="#"><img src="img/pms_1480563687.45673159.jpg" style="width: 60%;" /></a>
							</div>
							<div style="margin-top: 20px;">
								<a href="#">小米手环2腕带 </a>
							</div>
							<div style="color: #FF6700;margin-top: 12px;">19.9元</div>
							<div style="color: #757575;margin-top: 12px;">1.1万人好评</div>
							<div class="shop-car">
								加入购物车
							</div>
						</div>
					</div>
				</div>
			</div>
			<div id="last">
				<div class="last-head">
					<div class="weixiu">
						<a href="#">预约维修服务</a>
					</div>
					<div class="weixiu">
						<a href="#">7天无理由退货</a>
					</div>
					<div class="weixiu">
						<a href="#">15天免费换货</a>
					</div>
					<div class="weixiu">
						<a href="#">满150元包邮</a>
					</div>
					<div class="weixiu" style="border: none;">
						<a href="#">520余家售后网点</a>
					</div>
				</div>
				<div class="last-middle">
					<div class="last-middle-left">
						<div class="last-middle-left-help">
							<div>帮助中心</div>
							<div style="margin-top: 30px;">
								<a href="#">账户管理</a>
							</div>
							<div style="margin-top: 15px;">
								<a href="#">购物指南</a>
							</div>
							<div style="margin-top: 15px;">
								<a href="#">订单操作</a>
							</div>
						</div>
						<div class="last-middle-left-help">
							<div>服务支持</div>
							<div style="margin-top: 30px;">
								<a href="#">售后服务</a>
							</div>
							<div style="margin-top: 15px;">
								<a href="#">自主服务</a>
							</div>
							<div style="margin-top: 15px;">
								<a href="#">自动下载</a>
							</div>
						</div>
						<div class="last-middle-left-help">
							<div>线下门店</div>
							<div style="margin-top: 30px;">
								<a href="#">小米之家</a>
							</div>
							<div style="margin-top: 15px;">
								<a href="#">服务网点</a>
							</div>
							<div style="margin-top: 15px;">
								<a href="#">零售网点</a>
							</div>
						</div>
						<div class="last-middle-left-help">
							<div>关于小米</div>
							<div style="margin-top: 30px;">
								<a href="#">了解小米</a>
							</div>
							<div style="margin-top: 15px;">
								<a href="#">加入小米</a>
							</div>
							<div style="margin-top: 15px;">
								<a href="#">联系我们</a>
							</div>
						</div>
						<div class="last-middle-left-help">
							<div>关注我们</div>
							<div style="margin-top: 30px;">
								<a href="#">新浪微博</a>
							</div>
							<div style="margin-top: 15px;">
								<a href="#">小米部落</a>
							</div>
							<div style="margin-top: 15px;">
								<a href="#">官方微信</a>
							</div>
						</div>
						<div class="last-middle-left-help">
							<div>特色服务</div>
							<div style="margin-top: 30px;">
								<a href="#">F码通道</a>
							</div>
							<div style="margin-top: 15px;">
								<a href="#">礼物码</a>
							</div>
							<div style="margin-top: 15px;">
								<a href="#">防伪查询</a>
							</div>
						</div>
					</div>
					<div class="last-middle-right">
						<h2 style="color: #FF6700;font-size: 24px;">400-100-5678</h2>
						<p style="margin-top: 10px;font-size: 12px;">周一至周日 8:00-18:00</p>
						<p style="margin-top: 5px;font-size: 12px;">（仅收市话费）</p>
						<p id="rexian">24小时在线客服</p>
					</div>
				</div>
			</div>
			<div id="mi">
				<div class="mi-1">
					<div style="float: left;margin-top: 30px;">
						<div style="float: left;">
							<img src="img/milogo.png" />
						</div>
						<div style="float: left;margin-left: 5px;" class="mi-1-1">
							<div>
								<a href="#" style="font-size: 8px;">小米商城</a><span>|</span>
								<a href="#">MIUI</a><span>|</span>
								<a href="#">米聊</a><span>|</span>
								<a href="#">多看书城</a><span>|</span>
								<a href="#">小米路由器</a><span>|</span>
								<a href="#">视频电话</a><span>|</span>
								<a href="#">小米天猫店</a><span>|</span>
								<a href="#">小米淘宝直营店|</a><span>|</span>
								<a href="#">小米网盟</a><span>|</span>
								<a href="#">小米移动</a><span>|</span>
								<a href="#">隐私政策</a><span>|</span>
								<a href="#">Select Region</a>
							</div>
							<div>
								<a href="#">©mi.com</a>
								<span style="font-size: 10px;color: #757575;">京ICP证110507号 </span>
								<a href="#">京ICP备10046444号 </a>
								<a href="#">京公网安备11010802020134号 </a>
								<a href="#">京网文[2014]0059-0009号</a>
							</div>
							<div style="font-size: 12px;color: #757575;">
								违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
							</div>
						</div>
					</div>
					<div style=" width: 400px; float: right;margin-top: 30px;text-align: right;">
						<span><img src="img/truste.png"style="width: 20%;"/></span>
						<span><img src="img/v-logo-1.png"/></span>
						<span><img src="img/v-logo-2.png"/></span>
						<span><img src="img/v-logo-3.png"/></span>
					</div>
				</div>
				<div class="zuihou2" style="position: relative;top: 30px;">
					<h2>探索黑科技，小米为发烧而生！</h2>
				</div>
			</div>
		</div>
		<div id="beijing">
			<div id="tishi">
				<div id="queding">
					X
				</div>
				<div class="queding2">
					确定删除吗？
				</div>
				<div id="quxiao">
					取消
				</div>
				<div id="queding3">
					确定
				</div>
			</div>
		</div>
		<script type="text/javascript">
			function show(t) {
				var div = t.children[4];
				div.style.display = "block";
			}

			function yincang(t) {
				var div = t.children[4];
				div.style.display = "none";
			}

			function shanChu(t, id) {
				var div1 = document.querySelector(".goods");
				var div2 = t.parentNode.parentNode.parentNode;
				var ul = t.parentNode.parentNode;
				var li = ul.children[5];
				var i = ul.children[0].children[0];
				var xiaoji = parseFloat(li.innerHTML);
				var yunFei = parseFloat(document.getElementById("yunfei").innerHTML);
				var yunFei2 = document.getElementById("yunfei");
				var beijing = document.getElementById(id);
				beijing.style.display = "block";
				var ts = document.getElementById("tishi");
				ts.style.animation = "xiaoshi2 0.5s";
				ts.style.top = 100 + "px";
				beijing.addEventListener("click", xiaoshi);
				function xiaoshi(event) {
					event.cancelBubble = true;
					if(event.target.id == "tishi") {
						this.style.display = "block";
					} else if(event.target.id == "queding") {
						ts.style.animation = "xiaoshi 0.5s";
						ts.style.top = -270 + "px";
						var top = parseFloat(document.defaultView.getComputedStyle(ts, null).top);
						setTimeout(function() {
							beijing.style.display = "none";
						}, 800);
					} else if(event.target.className == "queding2") {
						this.style.display = "block";
					} else if(event.target.id == "quxiao") {
						ts.style.animation = "xiaoshi 0.5s";
						ts.style.top = -270 + "px";
						var top = parseFloat(document.defaultView.getComputedStyle(ts, null).top);
						setTimeout(function() {
							beijing.style.display = "none";
						}, 800);
					} else if(event.target.id == "queding3") {
						if(i.className == "active") {
							yunFei2.innerHTML = yunFei - xiaoji;
							jiShu2.innerHTML = jiShu2.innerHTML - 1;
						}
						jiShu1.innerHTML = jiShu1.innerHTML - 1;
						div1.removeChild(div2);
						ts.style.animation = "xiaoshi 0.5s";
						ts.style.top = -270 + "px";
						var top = parseFloat(document.defaultView.getComputedStyle(ts, null).top);
						setTimeout(function() {
							beijing.style.display = "none";
						}, 800);
					} else {
						ts.style.animation = "xiaoshi 0.5s";
						ts.style.top = -270 + "px";
						var top = parseFloat(document.defaultView.getComputedStyle(ts, null).top);
						setTimeout(function() {
							beijing.style.display = "none";
						}, 800);
					}
				}
			}
			function jianShao(t) {
				var div1 = t.parentNode;
				var ip = div1.children[1];
				if(ip.value <= 0) {
					ip.value = 0;
				} else {
					ip.value--;
				}
				var ul = div1.parentNode.parentNode;
				var i2 = ul.children[0].children[0];
				var price = parseFloat(ul.children[3].innerHTML);
				var xiaoji = ul.children[5];
				var sum = ip.value * price;
				xiaoji.innerHTML = sum + "元";
				if(i2.className == "active") {
					var div = document.getElementById("midlle");
					var div2 = div.children[1].children[1];
					var yunFei = div2.children[0].children[0];
					var sum2 = parseFloat(yunFei.innerHTML);
					yunFei.innerHTML = sum2 - price + "元";
				};
			};

			function zengJia(t) {
				var div1 = t.parentNode;
				var ip = div1.children[1];
				if(ip.value >= 99) {
					ip.value = 99;
				} else {
					ip.value++;
				}
				var ul = div1.parentNode.parentNode;
				var i2 = ul.children[0].children[0];
				var price = parseFloat(ul.children[3].innerHTML);
				var xiaoji = ul.children[5];
				var sum = ip.value * price;
				xiaoji.innerHTML = sum + "元";
				if(i2.className == "active") {
					var div = document.getElementById("midlle");
					var div2 = div.children[1].children[1];
					var yunFei = div2.children[0].children[0];
					var sum2 = parseFloat(yunFei.innerHTML);
					yunFei.innerHTML = sum2 + price + "元";
				};
			};
			var I = document.getElementById("mian");
			var is = document.querySelectorAll(".goods-1 i");
			var a = document.getElementsByClassName("active");
			var jiShu2 = document.querySelector(".jianshu2");
			var jiShu1 = document.querySelector(".jianshu1");
			I.addEventListener("click", function() {
				if(I.className == "active") {
					var xiaoJi = document.querySelectorAll(".goods-1 .xiaoji");
					var feiYong = document.getElementById("yunfei");
					var sum = parseFloat(feiYong.innerHTML);
					I.removeAttribute("class");
					jiShu2.innerHTML = 0;
					for(var i = 0; i < is.length; i++) {
						is[i].removeAttribute("class");
					}
					for(var i = 0; i < xiaoJi.length; i++) {
						var sum2 = parseFloat(xiaoJi[i].innerHTML);
						sum = sum - sum2;
					};
					feiYong.innerHTML = sum + "元";
				} else {
					var xiaoJi = document.querySelectorAll(".goods-1 .xiaoji");
					var feiYong = document.getElementById("yunfei");
					var sum = 0;
					I.className = "active";
					jiShu2.innerHTML = jiShu1.innerHTML;
					for(var i = 0; i < is.length; i++) {
						is[i].className = "active";
					}
					for(var i = 0; i < xiaoJi.length; i++) {
						var sum2 = parseFloat(xiaoJi[i].innerHTML);
						sum = sum + sum2;
					};
					feiYong.innerHTML = sum + "元";
				}
			});
			for(var i = 0; i < is.length; i++) {
				is[i].addEventListener("click", function() {
					if(this.className == "active") {
						this.removeAttribute("class");
						I.removeAttribute("class");
						var ul = this.parentNode.parentNode;
						var danJia = parseFloat(ul.children[3].innerHTML);
						var shuLiang = ul.children[4].children[0].children[1].value;
						var sum1 = danJia * shuLiang;
						var div = document.getElementById("midlle");
						var div2 = div.children[1].children[1];
						var yunFei = div2.children[0].children[0];
						var div3 = div.children[1].children[0];
						var ji2 = div3.children[2];
						var add = parseInt(ji2.innerHTML);
						add--;
						ji2.innerHTML = add;
						var sum2 = parseFloat(yunFei.innerHTML);
						yunFei.innerHTML = (sum2 - sum1) + "元";
					} else {
						this.className = "active";
						var ul = this.parentNode.parentNode;
						var danJia = parseFloat(ul.children[3].innerHTML);
						var shuLiang = ul.children[4].children[0].children[1].value;
						var sum1 = danJia * shuLiang;
						var div = document.getElementById("midlle");
						var div2 = div.children[1].children[1];
						var yunFei = div2.children[0].children[0];
						var div3 = div.children[1].children[0];
						var ji2 = div3.children[2];
						var add = parseInt(ji2.innerHTML);
						add++;
						ji2.innerHTML = add;
						var sum2 = parseFloat(yunFei.innerHTML);
						yunFei.innerHTML = sum1 + sum2 + "元";
					}
					if(a.length == is.length) {
						I.className = "active";
						jiShu2.innerHTML = jiShu1.innerHTML;
					}
				})
			};
		</script>
	</body>

</html>